/*
    Layout css file
    New classes, indexes and overrides must be defined here

    Every category must follow convention:
    * Category must contain page name (Exception are base classes)
    * Page name must be followed by word "elements"

    By example: index elements
*/

/* base elements */
*
{
    font-family: var(--font-family-roboto);
    transition: var(--transition-all);
}

body
{
    position: fixed;
    top: 0;
    left: 0;
    height: var(--height-body);
    width: var(--width-body);
    background: var(--background-body);
}

.logo
{
    position: absolute;
    top: var(--top-logo);
    z-index: 1;
    width: var(--width-logo);
    text-align: center;
    letter-spacing: var(--letter-spacing-10px);
    font-size: var(--font-size-42pt);
    font-weight: var(--font-weight-regular);
    color: var(--color-logo);
}

.logo-description
{
    position: absolute;
    top: var(--top-logo-description);
    z-index: 1;
    width: var(--width-logo-description);
    text-align: center;
    letter-spacing: var(--letter-spacing-2px);
    font-size: var(--font-size-9pt);
    font-weight: var(--font-weight-regular);
    color: var(--color-logo-description);
}

.clouds
{
    height: var(--height-clouds);
    width: var(--width-clouds);
    overflow: hidden;
}

.clouds > img
{
    position: relative;
    z-index: 1;
    height: var(--height-clouds-img);
    width: var(--width-clouds-img);
}

.clouds > .first
{
    top: var(--top-clouds-first);
}

.clouds > .second
{
    top: var(--top-clouds-second);
    left: var(--left-clouds-second);
}

.background
{
    position: absolute;
    top: 0;
    height: var(--height-background);
    width: var(--width-background);
}

/* setup elements */
.dhtmlx_message_area
{
    width: var(--width-dhtmlx-message-area);
}

.setup
{
    margin-top: calc((100vh / 2) - (var(--height-setup) / 2));
    max-width: var(--max-width-setup);
    min-width: var(--min-width-setup);
}

.setup-div
{
    display: block;
    position: relative;
    margin: auto;
    height: var(--height-setup-div);
    width: var(--width-setup-div);
    opacity: 0;
    background: white;
    border-radius: var(--border-radius-setup-div);
    overflow: hidden;
    box-shadow: var(--box-shadow-setup-div) var(--black-opacity-10);
    animation: fade-in-setup-div;
    animation-duration: var(--animation-duration-fade-in-setup-div);
    animation-fill-mode: forwards;
}

.form
{
    position: absolute;
    bottom: 0;
    left: 0;
    height: var(--height-form);
    width: var(--width-form);
    background: var(--background-form);
}

.form-squares-grid
{
    position: relative;
    bottom: var(--bottom-form-squares-grid);
    left: var(--left-form-squares-grid);
}

.form-squares-grid > div
{
    display: inline-block;
    margin-right: var(--margin-right-form-squares-grid-div);
    height: var(--height-form-squares-grid-div);
    width: var(--width-form-squares-grid-div);
    box-shadow: var(--box-shadow-form-squares-grid-div) var(--black-opacity-10);
}

.form-squares-grid > .first
{
    background: var(--background-form-squares-grid-first);
}

.form-squares-grid > .second
{
    background: var(--background-form-squares-grid-second);
    transform: var(--transform-form-squares-grid-second);
}

.form-squares-grid > .third
{
    background: var(--background-form-squares-grid-third);
}

.label-main-settings
{
    position: relative;
    margin-bottom: var(--margin-bottom-label-main-settings);
    text-align: center;
    letter-spacing: var(--letter-spacing-2px);
    font-size: var(--font-size-9pt);
    font-weight: var(--font-weight-regular);
    color: var(--color-label-main-settings);
}

.main-settings
{
   position: relative;
   left: var(--left-main-settings);
   height: var(--height-main-settings);
   width: var(--width-main-settings);
   background: var(--background-main-settings);
}

.main-settings > input
{
    position: relative;
    top: var(--top-main-settings-input);
    width: var(--width-main-settings-input);
    text-align: center;
    font-size: var(--font-size-14pt);
    font-weight: var(--font-weight-regular);
    color: var(--color-main-settings-input);
    background: var(--background-main-settings-input);
    border: 0;
    outline: none;
}

.main-settings > input::placeholder
{
    color: var(--color-main-settings-input-placeholder);
}

.main-settings > input::-webkit-input-placeholder
{
    color: var(--color-main-settings-input-placeholder);
}

.main-settings > input::-moz-placeholder
{
    opacity: 1;
}

.main-settings > input::-ms-clear
{
    display: none;
}

.main-settings > select
{
    position: relative;
    top: var(--top-main-settings-select);
    height: var(--height-main-settings-select);
    width: var(--width-main-settings-select);
    font-size: var(--font-size-14pt);
    font-weight: var(--font-weight-regular);
    color: var(--color-main-settings-input);
    background: var(--background-main-settings-select);
    border: 0;
    outline: none;
}

.main-settings-underline
{
    position: relative;
    top: var(--top-main-settings-underline);
    height: var(--height-main-settings-underline);
    width: var(--width-main-settings-underline);
    background: var(--background-main-settings-underline);
    box-shadow: var(--box-shadow-main-settings-underline) var(--black-opacity-10);
}

.label-additional-settings
{
    position: relative;
    top: var(--top-label-additional-settings);
    text-align: center;
    letter-spacing: var(--letter-spacing-2px);
    font-size: var(--font-size-9pt);
    font-weight: var(--font-weight-regular);
    color: var(--color-label-additional-settings);
}

.additional-settings
{
    position: relative;
    top: var(--top-additional-settings);
}

.button-squares-grid
{
    position: relative;
    top: var(--top-button-squares-grid);
}

.button-squares-grid > div
{
    display: inline-block;
    position: absolute;
    height: var(--height-button-squares-grid-div);
    width: var(--width-button-squares-grid-div);
    opacity: 0;
    box-shadow: var(--box-shadow-button-squares-grid-div) var(--black-opacity-10);
}

.button-squares-grid > .first
{
    left: var(--left-button-squares-grid-first);
    background: var(--background-button-squares-grid-first);
    animation: fade-in-square;
    animation-duration: var(--animation-duration-fade-in-square);
    animation-fill-mode: forwards;
}

.button-squares-grid > .second
{
    left: var(--left-button-squares-grid-second);
    visibility: hidden;
    background: var(--background-button-squares-grid-second);
}

.theme-buttons > input
{
    position: relative;
    top: var(--top-theme-buttons-input);
    height: var(--height-theme-buttons-input);
    width: var(--width-theme-buttons-input);
    letter-spacing: var(--letter-spacing-2px);
    font-size: var(--font-size-14pt);
    font-weight: var(--font-weight-regular);
    color: var(--color-theme-buttons-input);
    border: 0;
    outline: none;
    box-shadow: var(--box-shadow-theme-buttons-input) var(--black-opacity-10);
}

.theme-buttons > input:active
{
    transform: var(--transform-theme-buttons-input-active);
}

.theme-buttons > .first
{
    left: var(--left-theme-buttons-first);
    margin-right: var(--margin-right-theme-buttons-first);
    background: var(--background-theme-buttons-first);
}

.theme-buttons > .second
{
    background: var(--background-theme-buttons-second);
}

.port
{
    position: relative;
    top: var(--top-port);
    left: var(--left-port);
    height: var(--height-port);
    width: var(--width-port);
    text-align: center;
    letter-spacing: var(--letter-spacing-5px);
    font-size: var(--font-size-14pt);
    font-weight: var(--font-weight-regular);
    color: var(--color-port);
    background: var(--background-port);
    border-radius: var(--border-radius-port);
    border: 0;
    outline: none;
}

.port::placeholder
{
    letter-spacing: 0;
    color: var(--color-port-placeholder);
}

.port::-webkit-input-placeholder
{
    letter-spacing: 0;
    color: var(--color-port-placeholder);
}

.port::-moz-placeholder
{
    letter-spacing: 0;
    opacity: 1;
}

.port::-ms-clear
{
    display: none;
}

.submit
{
    position: absolute;
    bottom: var(--bottom-submit);
    left: var(--left-submit);
    height: var(--height-submit);
    width: var(--width-submit);
    letter-spacing: var(--letter-spacing-2px);
    font-size: var(--font-size-14pt);
    font-weight: var(--font-weight-regular);
    color: var(--color-submit);
    background: var(--background-submit);
    border: 0;
    border-radius: 0.625rem;
    outline: none;
    box-shadow: var(--box-shadow-submit) var(--black-opacity-10);
}

.submit:active
{
    transform: var(--transform-submit-active);
}

/* index elements */
.index
{
    margin-top: calc((100vh / 2) - (var(--height-index-xl) / 2));
    max-width: var(--max-width-index-xl);
    min-width: var(--min-width-index-xl);
}

@media only screen and (max-width: 75rem)
{
    .index
    {
        margin-top: calc((100vh / 2) - (var(--height-index-lg) / 2));
        max-width: var(--max-width-index-lg);
        min-width: var(--min-width-index-lg);
    }
}

@media only screen and (max-width: 48rem)
{
    .index
    {
        margin-top: calc((100vh / 2) - (var(--height-index-md) / 2));
        max-width: var(--max-width-index-md);
        min-width: var(--min-width-index-md);
    }

    .sm-hidden
    {
        visibility: hidden;
    }
}

.col-sm-12.col-md-6.col-lg-6.col-xl-4
{
   max-width: var(--max-width-col-sm-12-col-md-6-col-lg-6-col-xl-4);
   min-width: var(--min-width-col-sm-12-col-md-6-col-lg-6-col-xl-4);
}

.col-lg-12.col-xl-8
{
    max-width: var(--max-width-col-lg-12-col-xl-8);
    min-width: var(--min-width-col-lg-12-col-xl-8);
}

.card
{
    margin-bottom: var(--margin-bottom-card);
    max-height: var(--max-height-card);
    min-height: var(--min-height-card);
    opacity: 0;
    border: none;
    border-radius: var(--border-radius-card);
    overflow: hidden;
    background: var(--background-card);
    box-shadow: var(--box-shadow-card) var(--black-opacity-10);
}

.header
{
    position: relative;
    display: flex;
    top: var(--top-header);
    left: var(--left-header);
}

.hw-logo
{
    height: var(--height-hw-logo);
    width: var(--width-hw-logo);
    border-radius: var(--border-radius-hw-logo);
}

.hw-logo.first
{
    background: var(--background-hw-logo-first);
}

.hw-logo.second
{
    background: var(--background-hw-logo-second);
}

.hw-logo.third
{
    background: var(--background-hw-logo-third);
}

.label-hw-info
{
    position: absolute;
    top: var(--top-label-hw-info);
    left: var(--left-label-hw-info);
}

.hw-type
{
    font-size: var(--font-size-18pt);
    font-weight: var(--font-weight-bold);
    color: var(--color-hw-type);
}

.hw-name
{
    font-size: var(--font-size-12pt);
    font-weight: var(--font-weight-regular);
    color: var(--color-hw-name);
}

.usage
{
    position: absolute;
    height: var(--height-usage);
    width: var(--width-usage);
    bottom: var(--bottom-usage);
    left: var(--left-usage);
}

.card-body-squares-grid
{
    position: absolute;
    top: var(--top-card-body-squares-grid);
}

.card-body-squares-grid > div
{
    margin-bottom: var(--margin-bottom-card-body-squares-grid-div);
    height: var(--height-card-body-squares-grid-div);
    width: var(--width-card-body-squares-grid-div);
}

.card-body-squares-grid.first > div
{
    background: var(--background-card-body-squares-grid-first-div);
}

.card-body-squares-grid.second > div
{
    background: var(--background-card-body-squares-grid-second-div);
}

.card-body-squares-grid.third > div
{
    background: var(--background-card-body-squares-grid-third-div);
}

.main-hw-info
{
    position: absolute;
    right: 0;
    height: var(--height-main-hw-info);
}

.hw-usage > div
{
    position: absolute;
    right: 0;
    bottom: var(--bottom-hw-usage-div);
    font-size: var(--font-size-62pt);
    font-weight: var(--font-weight-bold);
}

.usage-value
{
    display: flex;
    margin-right: var(--margin-right-usage-value);
}

.usage-value > span
{
    position: relative;
    height: var(--height-usage-value-span);
    width: var(--width-usage-value-span);
    color: var(--color-usage-value-span);
    animation: wiggle-usage-value;
    animation-duration: var(--animation-duration-wiggle-usage-value);
}

.usage-value > .first
{
    animation-delay: var(--animation-delay-usage-value-first);
}

.usage-value > .second
{
    animation-delay: var(--animation-delay-usage-value-second);
}

.usage-value > .third
{
    animation-delay: var(--animation-delay-usage-value-third);
}

.usage-postfix
{
    color: var(--color-usage-postfix);
}

.info-label
{
    position: relative;
    top: var(--top-info-label);
    width: var(--width-info-label);
    text-align: center;
    font-size: var(--font-size-9pt);
    font-weight: var(--font-weight-regular);
    color: var(--color-info-label);
    background: transparent;
}

.usage-underline
{
    position: absolute;
    right: 0;
    bottom: 0;
    height: var(--height-usage-underline);
    width: var(--width-usage-underline);
}

.usage-underline.first
{
    background: var(--background-usage-underline-first);
}

.usage-underline.second
{
    background: var(--background-usage-underline-second);
}

.usage-underline.third
{
    background: var(--background-usage-underline-third);
}

.footer
{
    position: absolute;
    bottom: 0;
    left: 0;
    height: var(--height-footer);
    width: var(--width-footer);
}

.footer.first
{
    background: var(--background-footer-first);
}

.footer.first > .card-footer-dots-grid > div > .inner-dot
{
    background: var(--background-footer-first-card-footer-dots-grid-div-inner-dot);
}

.footer.second
{
    background: var(--background-footer-second);
}

.footer.second > .card-footer-dots-grid > div > .inner-dot
{
    background: var(--background-footer-second-card-footer-dots-grid-div-inner-dot);
}

.footer.third
{
    background: var(--background-footer-third);
}

.footer.third > .card-footer-dots-grid > div > .inner-dot
{
    background: var(--background-footer-third-card-footer-dots-grid-div-inner-dot);
}

.card-footer-dots-grid
{
    position: absolute;
}

.card-footer-dots-grid > div
{
    display: inline-block;
    position: absolute;
    bottom: var(--bottom-card-footer-dots-grid-div);
    height: var(--height-card-footer-dots-grid-div);
    width: var(--width-card-footer-dots-grid-div);
    border-radius: var(--border-radius-card-footer-dots-grid-div);
    background: var(--background-card-footer-dots-grid-div);
}

.card-footer-dots-grid > .first
{
    left: var(--card-footer-dots-grid-first);
}

.card-footer-dots-grid > .second
{
    left: var(--card-footer-dots-grid-second);
}

.card-footer-dots-grid > .third
{
    left: var(--card-footer-dots-grid-third);
}

.inner-dot
{
    position: absolute;
    top: var(--top-inner-dot);
    left: var(--left-inner-dot);
    height: var(--height-inner-dot);
    width: var(--width-inner-dot);
    border-radius: var(--border-radius-inner-dot);
}

.detailed-hw-info
{
    position: absolute;
}

.detailed-hw-info > div
{
    display: inline-block;
    position: absolute;
    top: var(--top-detailed-hw-info-div);
    height: var(--height-detailed-hw-info-div);
    width: var(--width-detailed-hw-info-div);
    text-align: center;
    font-size: var(--font-size-14pt);
    font-weight: var(--font-weight-regular);
    color: var(--color-detailed-hw-info-div);
}

.detailed-hw-info > .first
{
    left: var(--left-detailed-hw-info-first);
}

.detailed-hw-info > .second
{
    left: var(--left-detailed-hw-info-second);
}

.detailed-hw-info > .third
{
    left: var(--left-detailed-hw-info-third);
}

.dividers
{
    position: absolute;
}

.dividers > div
{
    display: inline-block;
    position: absolute;
    height: var(--height-dividers-div);
    width: var(--width-dividers-div);
    background: var(--background-dividers-div);
}

.dividers > .first
{
    left: var(--left-dividers-first);
}

.dividers > .second
{
    left: var(--left-dividers-second);
}

.controls
{
    position: absolute;
    height: var(--height-controls);
    width: var(--width-controls);
}

.controls > img
{
    position: absolute;
    top: var(--top-controls-img);
    z-index: 2;
    height: var(--height-controls-img);
    width: var(--width-controls-img);
    border-radius: var(--border-radius-controls-img);
}

.controls > .first
{
    left: var(--left-controls-first);
    opacity: 0.5;
    animation: wiggle-first-control;
    animation-duration: var(--animation-duration-wiggle-first-control);
}

.controls > .second
{
    left: var(--left-controls-second);
    animation: wiggle-second-control;
    animation-duration: var(--animation-duration-wiggle-second-control);
}

.controls > .first:active
{
    transform: var(--transform-controls-first-active);
}

.controls > .second:active
{
    transform: var(--transform-controls-second-active);
}

.pages
{
    position: absolute;
}

.pages > div
{
    position: absolute;
}

.contacts-label
{
    position: absolute;
    top: var(--top-contacts-label);
    z-index: 1;
    width: var(--width-contacts-label);
    text-align: center;
    letter-spacing: var(--letter-spacing-5px);
    font-size: var(--font-size-18pt);
    font-weight: var(--font-weight-regular);
    color: var(--color-contacts-label);
}

.contacts-description > div
{
    position: absolute;
    z-index: 1;
    width: var(--width-contacts-description-div);
    text-align: center;
    letter-spacing: var(--letter-spacing-2px);
    font-size: var(--font-size-10pt);
    font-weight: var(--font-weight-regular);
    color: var(--color-contacts-description-div);
}

.contacts-description > .first
{
    top: var(--top-contacts-description-first);
}

.contacts-description > .second
{
    top: var(--top-contacts-description-second);
}

.contacts-links > a > img
{
    position: absolute;
    top: var(--top-contacts-links-a-img);
    z-index: 1;
    height: var(--height-contacts-links-a-img);
    width: var(--width-contacts-links-a-img);
}

.contacts-links > a > .first
{
    left: var(--left-contacts-links-a-first);
}

.contacts-links > a > .first:active
{
    transform: var(--transform-contacts-links-a-first-active);
}

.contacts-links > a > .second
{
    left: var(--left-contacts-links-a-second);
}

.contacts-links > a > .second:active
{
    transform: var(--transform-contacts-links-a-second-active);
}

.uptime
{
    position: absolute;
    bottom: 0;
    left: 0;
    height: var(--height-uptime);
    width: var(--width-uptime);
    background: var(--background-uptime);
}

.uptime-squares-grid
{
    position: relative;
    bottom: var(--bottom-uptime-squares-grid);
    left: var(--left-uptime-squares-grid);
}

.uptime-squares-grid > div
{
    display: inline-block;
    margin-right: var(--margin-right-uptime-squares-grid-div);
    height: var(--height-uptime-squares-grid-div);
    width: var(--width-uptime-squares-grid-div);
    box-shadow: var(--box-shadow-uptime-squares-grid-div) var(--black-opacity-10);
}

.uptime-squares-grid > .first
{
    background: var(--background-uptime-squares-grid-first);
}

.uptime-squares-grid > .second
{
    background: var(--background-uptime-squares-grid-second);
    transform: var(--transform-uptime-squares-grid-second);
}

.uptime-squares-grid > .third
{
    background: var(--background-uptime-squares-grid-third);
}

.uptime-rectangle-grid
{
    position: absolute;
    top: var(--top-uptime-rectangle-grid);
    left: var(--left-uptime-rectangle-grid);
}

.values-grid > div
{
    display: inline-block;
    margin-right: var(--margin-right-values-grid-div);
    height: var(--height-values-grid-div);
    width: var(--width-values-grid-div);
    text-align: center;
    font-size: var(--font-size-42pt);
    font-weight: var(--font-weight-bold);
    color: var(--color-values-grid-div);
    background: var(--background-values-grid-div);
}

.values-grid > div > p
{
    position: relative;
    bottom: var(--bottom-values-grid-div-p);
}

.labels-grid > div
{
    display: inline-block;
    margin-right: var(--margin-right-labels-grid-div);
    margin-bottom: var(--margin-bottom-labels-grid-div);
    height: var(--height-labels-grid-div);
    width: var(--width-labels-grid-div);
    text-align: center;
    font-size: var(--font-size-9pt);
    font-weight: var(--font-weight-regular);
    color: var(--color-labels-grid-div);
    background: var(--background-labels-grid-div);
}

.chart-label
{
    position: absolute;
    top: var(--top-chart-label);
    left: var(--left-chart-label);
    font-size: var(--font-size-18pt);
    font-weight: var(--font-weight-bold);
    color: var(--color-chart-label);
}

.chart-triangle-grid
{
    position: absolute;
    top: var(--top-chart-triangle-grid);
}

.chart-triangle-grid > div
{
    position: absolute;
    border-style: solid;
    border-width: var(--border-width-chart-triangle-grid-div);
    opacity: 0;
    animation: fade-in-triangle;
    animation-duration: var(--animation-duration-fade-in-triangle);
    animation-delay: var(--animation-delay-chart-triangle-grid-div);
    animation-fill-mode: forwards;
}

.chart-triangle-grid > .first
{
    left: var(--left-chart-triangle-grid-first);
    border-color: var(--border-color-chart-triangle-grid-first) transparent;
}

.chart-triangle-grid > .second
{
    left: var(--left-chart-triangle-grid-second);
    border-color: var(--border-color-chart-triangle-grid-second) transparent;
}

.chart-triangle-grid > .third
{
    left: var(--left-chart-triangle-grid-third);
    border-color: var(--border-color-chart-triangle-grid-third) transparent;
}

.chart-rectangle-grid
{
    position: absolute;
    top: var(--top-chart-rectangle-grid);
}

.chart-rectangle-grid > div
{
    display: inline-block;
    position: absolute;
    height: var(--height-chart-rectangle-grid-div);
    width: var(--width-chart-rectangle-grid-div);
    cursor: pointer;
}

.chart-rectangle-grid > div:active
{
    transform: var(--transform-chart-rectangle-grid-div-active);
}

.chart-rectangle-grid > .first
{
    left: var(--left-chart-rectangle-grid-first);
    background: var(--background-chart-rectangle-grid-first);
}

.chart-rectangle-grid > .second
{
    left: var(--left-chart-rectangle-grid-second);
    background: var(--background-chart-rectangle-grid-second);
}

.chart-rectangle-grid > .third
{
    left: var(--left-chart-rectangle-grid-third);
    background: var(--background-chart-rectangle-grid-third);
}

.chart-container
{
    position: absolute;
    top: var(--top-chart-container);
    left: var(--left-chart-container);
    height: var(--height-chart-container);
    width: var(--width-chart-container);
    overflow: hidden;
    border: var(--border-chart-container) solid var(--grey-light);
}

#project-version
{
    position: relative;
    bottom: var(--bottom-project-version);
    opacity: 0;
    font-size: var(--font-size-12pt);
    font-weight: var(--font-weight-regular);
    color: var(--color-project-version);
}

/* error classes */
.error
{
    margin-top: calc((100vh / 2) - (var(--height-error) / 2));
    max-width: var(--min-width-error);
    min-width: var(--min-width-error);
}

.error-img
{
    display: block;
    position: relative;
    z-index: 1;
    margin: auto;
    height: var(--height-error-img);
    width: var(--width-error-img);
    object-fit: cover;
    border-radius: var(--border-radius-error-img);
    box-shadow: var(--box-shadow-error-img) var(--black-opacity-10);
}

.error-div
{
    position: relative;
    left: var(--left-error-div);
    z-index: 1;
    height: var(--height-error-div);
    width: var(--width-error-div);
    opacity: 0;
    border-radius: var(--border-radius-error-div);
    background: var(--background-error-div);
    box-shadow: var(--box-shadow-error-div) var(--black-opacity-10);
    animation: fade-in-error-div;
    animation-duration: var(--animation-duration-fade-in-error-div);
    animation-fill-mode: forwards;
}

.error-div > div
{
    position: absolute;
}

.code
{
    top: var(--top-code);
    left: var(--left-code);
    font-size: var(--font-size-21pt);
    font-weight: var(--font-weight-bold);
    color: var(--color-code);
}

.title
{
    top: var(--top-title);
    left: var(--left-title);
    font-size: var(--font-size-31pt);
    font-weight: var(--font-weight-bold);
    color: var(--color-title);
}

.explanation
{
    top: var(--top-explanation);
    left: var(--left-explanation);
}

.explanation > div
{
    font-size: var(--font-size-13pt);
    font-weight: var(--font-weight-regular);
    color: var(--color-explanation-div);
}

.advice
{
    width: var(--width-advice);
    bottom: var(--bottom-advice);
    text-align: center;
    font-size: var(--font-size-11pt);
    font-weight: var(--font-weight-regular);
    color: var(--color-advice);
}